@import '../../../variables';

$mobileHorizontalPadding: 8px;
$navVerticalPadding: 4px;
$macExtraPadding: (-8px + $mac-title-bar-padding);

:host {
  display: block;
  position: relative;
  user-select: none;
  -webkit-user-select: none; /* Safari */
}

:host-context(.isMac.isElectron) {
  padding-top: $macExtraPadding;
  -webkit-app-region: drag;
  cursor: grab;

  .wrapper {
    -webkit-app-region: drag;
  }

  &:active {
    cursor: grabbing;
  }

  .current-work-context-title,
  ::ng-deep button,
  ::ng-deep a,
  button,
  a {
    -webkit-app-region: no-drag;
  }
}

.wrapper {
  background: transparent;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: $navVerticalPadding $mobileHorizontalPadding;
  //flex-wrap: wrap;
  min-height: $bar-height-large;

  @include mq(xs) {
    min-height: $bar-height;
    padding: $navVerticalPadding 16px;
  }
}

.current-work-context-title {
  //font-weight: bold;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  //flex-grow: 1;
  white-space: nowrap;
  max-width: 100%;
  cursor: pointer;
  border-radius: $card-border-radius;
  padding: $s 2 * $s $s $s;

  @include mq(xs) {
    padding-right: $s;
  }

  &:focus {
    outline: none;
  }
}

.project-settings-btn {
  display: none;
  @include mq(xs) {
    display: block;
    transition: $transition-standard;
    opacity: 0;
    margin-right: 2 * $s;
    margin-left: -$s;
    position: relative;
    z-index: 1;
  }

  &:hover,
  .current-work-context-title:hover + & {
    opacity: 1;
  }
}

a,
button {
  cursor: pointer;
}

.action-nav {
  margin-right: 0px;
  margin-left: auto;
  display: flex;
  align-items: center;

  :host-context([dir='rtl']) & {
    margin-left: 0px;
    margin-right: auto;
  }

  button {
    margin-left: $s * 0.25;

    @include mq(xs) {
      margin-left: $s;
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.7);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.7);
  }
}

.play-btn-wrapper {
  position: relative;
  margin-left: $s * 0.5;

  @include mq(xs) {
    margin-left: $s;
  }

  .pulse-circle {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    left: -4px;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    margin: auto;
    transform: scale(1, 1);
    animation: pulse 2s infinite;
    background: $c-accent;
    opacity: 0.6;
  }

  .play-btn {
    position: relative;
    margin-left: 0;
    // needs to be above the rest
    z-index: 2;

    .circle-svg {
      transform: rotate(-90deg);
      position: absolute;
      opacity: 0.15;
      top: -8px;
      right: -8px;
      pointer-events: none;
    }

    .mat-icon {
      position: relative;
      z-index: 2;
    }
  }

  .pomodoro-label {
    margin-left: 0;
    position: absolute;
    line-height: 1;
    padding: 2px 4px 1px;
    background: #fff;
    color: #000;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: $whiteframe-shadow-2dp;
    font-weight: bold;
    border-radius: 8px;
    z-index: 4;
    pointer-events: none;
    bottom: $s * -0.25;

    @include darkTheme {
      background: $dark-theme-bg-lighter;
      color: #fff;
    }
  }

  .pomodoro-controls {
    transition: $transition-standard;
    position: absolute;
    top: 100%;
    display: flex;
    flex-direction: column;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;

    // add a little bit of extra hover area
    &:after {
      content: '';
      position: absolute;
      top: $s * -1.25;
      left: $s * -1.25;
      right: $s * -1.25;
      bottom: $s * -1.25;
    }
  }

  &:hover .pomodoro-controls {
    pointer-events: all;

    .pomodoro-btn {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .pomodoro-btn {
    transition: $transition-standard;
    transform: translateY(-100%);
    opacity: 0;
    position: relative;
    z-index: 2;
    margin-top: $s;
    margin-left: 0;

    &:nth-child(2) {
      transform: translateY(-200%);
    }
  }
}

.current-task-title {
  position: absolute;
  right: 100%;
  width: auto;
  border: 2px solid $c-accent;
  border-radius: 12px;
  min-width: 50px;
  white-space: nowrap;
  padding: $s * 0.5 2 * $s;
  padding-right: $s * 2.5;
  margin-right: -$s * 2;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  pointer-events: none;
  transition: $transition-standard;
  display: flex;

  @include mq(xs, max) {
    display: none;
  }

  @include darkTheme() {
    background: $dark-theme-bg-lighter;
  }

  .title {
    max-width: 250px;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .project {
    padding-right: 0;
  }

  :host:hover & {
    opacity: 0;
  }
}

.simple-counter-mobile-trigger {
  margin-left: $s;
}

.simple-counter-buttons-outer-wrapper {
  position: relative;
}

.simple-counter-buttons {
  display: flex;

  @include mq(xs, max) {
    position: absolute;
    display: flex;
    transition: $transition-standard;
    top: 100%;
    flex-direction: column;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;

    &.isVisibleMobile {
      pointer-events: all;
    }
  }
}

simple-counter-button {
  @include mq(xs, max) {
    transition: $transition-standard;
    transform: translateY(-100%);
    opacity: 0;
    position: relative;
    z-index: 2;
    margin-top: $s;
    margin-left: 0;

    &:nth-child(2) {
      transform: translateY(-200%);
    }
    &:nth-child(3) {
      transform: translateY(-300%);
    }
    &:nth-child(4) {
      transform: translateY(-400%);
    }
    &:nth-child(5) {
      transform: translateY(-500%);
    }
    &:nth-child(6) {
      transform: translateY(-600%);
    }
    &:nth-child(7) {
      transform: translateY(-700%);
    }

    .simple-counter-buttons.isVisibleMobile & {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

.toggle-notes-btn {
  position: relative;
  overflow: visible !important;

  &.isActive.isRouteWithRightPanel::after {
    content: '';
    width: 100%;
    position: absolute;
    left: 1px;
    top: 0;
    bottom: -5px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    z-index: -1;
    box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.3);

    @include lightTheme() {
      background: $light-theme-selected-task-bg-color;
      //border-color: rgba(0, 0, 0, 0.12);
    }

    @include darkTheme() {
      background: $dark8;
      //border-color: $dark-theme-extra-border-color;
    }
  }

  @include mq(xxxs, max) {
    &:disabled {
      display: none;
    }
  }
}

.note-ico {
  transition: $transition-standard;

  .toggle-notes-btn.isActive & {
    transform: rotate(45deg);
  }
}

.sync-state-ico {
  // important because it might be overwritten by material styles sometimes
  position: absolute !important;
  font-size: 10px;
  height: 10px;
  line-height: 10px;
  left: 50%;
  top: 50%;
  font-weight: bold;
  transform: translate(-50%, -50%);
}

.spin {
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(-360deg);
  }
}
